<template>
	<view class="fl-s-s p-30 relative">
		<view class="ibox fr-s-c"  style="margin-top: 0rpx;">
			<text class="c-33 fs-28 w-132 bold">+86</text>
			<input type="number" maxlength="11" v-model="mobile" class="flex-1 fs-28" placeholder="请输入手机号" />
		</view>
		<view class="ibox fr-s-c">
			<text class="c-33 fs-28 w-132 bold">验证码</text>
			<input type="number" maxlength="6" v-model="code" class="flex-1 fs-28" placeholder="请输入短信验证码" />
			<text class="c-main codebtn fr-c fs-20" @click="getCode">{{tips}}</text>
		</view>
		<view class="ibox fr-s-c">
			<text class="c-33 fs-28 w-132 bold">新密码</text>
			<input type="text" :password="pwd" v-model="password" class="m-r-20 flex-1 fs-28" placeholder="请输入新密码" />
			<up-icon @click="pwd=!pwd" :name="pwd?'eye-off':'eye'" size="40rpx" color="#454545"></up-icon>
		</view>
		<view class="ibox fr-s-c">
			<text class="c-33 fs-28 w-132 bold">确认密码</text>
			<input type="text" password v-model="repwd" class="m-r-20 flex-1 fs-28" placeholder="请再次输入新密码" />
			<!-- <up-icon @click="pwd=!pwd" :name="pwd?'eye-off':'eye'" size="40rpx" color="#013591"></up-icon> -->
		</view>
		<view class="big-btn c-ff fr-c fs-30" style="margin-top: 100rpx; background: #ff5c55;" @click="sub">确认重置</view>
		<up-code :seconds="seconds" ref="uCodeRef" @change="codeChange"></up-code>
	</view>
</template>

<script setup>
	const pwd = ref(true);
	const tips = ref('');
	const seconds = ref(120);
	const uCodeRef = ref(null);


	const mobile = ref('');
	const code = ref('');
	const password = ref('');
	const repwd = ref('')


	const codeChange = (text) => {
		console.log(text)
		tips.value = text;
	};

	const getCode = () => {
		if (!mobile.value) return uni.$u.toast('请输入手机号');
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			uni.$post({
				url: "/api/Sms/send",
				data: {
					mobile: mobile.value,
					event: 'pass', // 注册传register 登录传login 忘记密码传pass 修改密码传 resetpwd 更换手机号传changemobile 微信登录绑定手机号传webind 验证是否是本机main 商家入驻 dplot 绑定银行卡 addpay
				}
			}).then(res => {
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			})
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};

	function sub() {
		if (!mobile.value) return uni.$u.toast('请输入手机号');
		if (!code.value) return uni.$u.toast('请输入验证码');
		if (!password.value) return uni.$u.toast('请输入新密码');
		if (!repwd.value) return uni.$u.toast('请确认密码');
		if (password.value != repwd.value) return uni.$u.toast('两次密码不一致');
		uni.$post({
			url: '/api/User/resetpwd',
			data: {
				mobile: mobile.value,
				captcha: code.value,
				password: password.value,
				newpassword: repwd.value,
			}
		}).then(res => {
			if (uni.getStorageSync('user')) {
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/Login/Login'
				})
			} else {
				uni.showToast({
					title: res.msg,
				})
				uni.$delayBack()
			}
		})
	}
</script>

<style>
	page {
		background: #FFFFF;
	}

	.ibox {
		width: 686rpx;
		height: 88rpx;
		/* background: #f8f8f8; */
		/* border-radius: 44rpx 44rpx 44rpx 44rpx; */
		padding: 25rpx 0rpx;
		border-bottom: 2rpx solid #F1F1F1;
		margin-top: 38rpx;
	}

	.kuang {
		width: 25rpx;
		height: 25rpx;
		border: 2rpx solid #013591;
	}

	.w-132 {
		width: 132rpx;
	}

	.codebtn{
		min-width: 146rpx;
		padding: 0 24rpx;
		height: 44rpx;
		background: #a9d8bd;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
	}
</style>